@extends('layout.master')

@section('content-header')
    <h1>Tamu</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ URL::route('tamus.index') }}"><i class="fa fa-user"></i> Tamu</a></li>
        <li class="active"><i class="fa fa-plus-square"></i> Tambah</li>
    </ol>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body table-responsive">
                <div class="callout callout-warning">
                    <h4>Informasi!</h4>
                    <p>Pilih lokasi dan penduduk pendamping sesuai lokasi yang dipilih.</p>
                </div>
				{{ Form::open(array('route'=>array('tamus.create'), 'method'=>'POST', 'class'=>'form-horizontal', 'role'=>'form')) }}
					<div class="form-group">
						{{ Form::label('lokasi_input', 'Lokasi', array('class' => 'col-sm-2 control-label')) }}
						<div class="col-sm-10">
							{{Form::select('lokasi_input', $lokasis, null, array('class'=>'form-control'))}}
						</div>
					</div>
					<div class="form-group">
						{{ Form::label('penduduk_penjamin', 'Penduduk Penjamin', array('class' => 'col-sm-2 control-label')) }}
						<div class="col-sm-10">
							{{Form::select('penduduk_penjamin', array(), null, array('class'=>'form-control', 'disabled'=>'disabled'))}}
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							{{ HTML::decode(Form::button('<i class="fa fa-refresh"></i> Reset', array('class'=>'btn btn-success','type'=>'reset'))) }}
							{{ HTML::decode(Form::button('<i class="fa fa-angle-right"></i> Lanjutkan', array('class'=>'btn btn-primary','type'=>'submit'))) }}
						</div>
					</div>
				{{ Form::close() }}
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    $(function() {
    	$(document).ready(function() {
    		$('#lokasi_input').change(function(event) {
                $('#penduduk_penjamin').attr('disabled', 'disabled');
                var that = $(this);
    			if (that.val() != '') {
                    $.ajax({
                        url: '/pendudukpenjamin/',
                        type: 'POST',
                        dataType: 'json',
                        data: {id: that.val()},
                    })
                    .done(function(data) {
                        $('#penduduk_penjamin').removeAttr('disabled');
                        $('#penduduk_penjamin').html("");
                        $('#penduduk_penjamin').append('<option value="">- - Pilih Penduduk Penjamin - -</option>')
                        $.each(data, function(index, val) {
                             $('#penduduk_penjamin').append('<option value="'+val.id+'">'+val.nama+'</option>')
                        });
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });
                }else{
                    $('#penduduk_penjamin').attr('disabled', 'disabled');
                    $('#penduduk_penjamin').html("");
                    $('#penduduk_penjamin').append('<option value="">- - Pilih Penduduk Penjamin - -</option>')
                };
    		});
            
    	});
    });
</script>
@stop